<template>
  <div class="item_list">
    <form action="/search" class="fixedTop">
      <van-search
        placeholder="请输入商品名称"
        v-model="searchVal"
        @search="onSearch"
        @cancel="$router.go(-2)"
        showAction
        background="#00CC66"
      />
    </form>

    <goods-list :shopId="shopId" :type="0" :keyword="searchKey" @addCart="addCart"/>

    <van-sku
      v-if="skuData"
      v-model="showSku"
      :sku="skuData.sku"
      :goods="skuData.goods"
      :hide-stock="skuData.sku.hide_stock"
      :quota="0"
      :quota-used="0"
      ref="skuDom"
    >
      <template slot="sku-actions" slot-scope="props">
        <div class="van-sku-actions">
          <van-button bottom-action @click="addSkuCart">加入购物车</van-button>
        </div>
      </template>
    </van-sku>
    <transition name="fade">
      <van-icon name="arrowupcircle" class="backTop red" @click.native="backTop" v-show="showArrow"></van-icon>
    </transition>
  </div>
</template>

<script>
import { GOODS_SEARCH } from "@/api/goods";
import { Search, Loading, Sku } from "vant";
import scrollFixed from "@/vue/mixin/scroll-fixed";
import GoodsList from "@/vue/components/goods-list/";
import buyAction from "@/vue/mixin/buy-action";
import skuData from "@/vue/mixin/sku-data";

export default {
  name: "Item-list",
  props: {
    keyword: {
      type: String,
      default: ""
    }
  },

  mixins: [scrollFixed, buyAction, skuData],

  data() {
    return {
      shopId: this.getUser().upshopTid,
      searchVal: this.keyword, //搜索输入值
      searchKey: this.keyword //搜索关键字
    };
  },

  activated() {
    this.searchVal = this.keyword;
    this.searchKey = this.keyword;
  },

  methods: {
    onSearch() {
      this.searchKey = this.searchVal;
    }
  },

  components: {
    [GoodsList.name]: GoodsList,
    [Search.name]: Search,
    [Loading.name]: Loading,
    [Sku.name]: Sku
  }
};
</script>

<style lang="scss" scoped>
.item_list {
  background-color: $bg-color;
  padding-top: 50px;
  box-sizing: border-box;
}
.fixedTop {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
}

.items_loading {
  margin: 0 auto;
}
</style>
